<template>
	<view>
		<view class="talk-item">
			<view @click="toDetail">
				<view class="fx-center-between talk-item-user">
					<view class="fx-center">
						<image :src="info.user.avatar_url" mode="aspectFill" class="user-avtr" @click.stop="toHome">
						</image>
						<view class="">
							<view class="name" @click.stop="toHome">{{info.user.nickname}}</view>
							<!-- <view class="desc">收入指数上榜用户</view> -->
						</view>

					</view>
					<view class="dian-box" @click.stop="$emit('clickAction',info)">
						<image src="/static/dian.png" mode="heightFix" class="dian-icon">
						</image>
					</view>

				</view>

				<zh-readMore :text="info.content" :rows="4"></zh-readMore>
				<!-- <multi-text :text="info.content" :lineCount="4" :fontSize="30"></multi-text> -->
				<view class="talk-img-box fx-center">
					<image :src="img.url" mode="aspectFill" class="talk-img" v-for="(img,index) in info.file_assets"
						:key="img.id" @click.stop="$api.toPrewImgArr(info.file_assets,index)">
					</image>
				</view>
				<view class="project-box fx-center-between" v-for="p in info.projects" :key="p.id"
					@click.stop="lookProject(p.id)">
					<view class="fx-center">
						<image :src="p.cover_url" mode="aspectFill"></image>
						<view class="">{{p.name}}</view>
					</view>
					<van-button color="#F2F2F2" custom-style="color:#8A8F99" size="mini">查看项目</van-button>
				</view>
				<view class="fx-center">
					<view class="talk-tag" v-for="word in info.words" :key="word.id">
						<text># {{word.name}}</text>
					</view>
				</view>
			</view>
			<view class="fx-center-between talk-opration">
				<button open-type="share" :data-id="info.id" :data-img="getimg" :data-content="info.content"
					style="font-size: 30rpx;color: #5C5F66;border:none;background-color: #fff;">
					<view class="fx-center">
						<image src="/static/share.png" mode="heightFix"></image>
						<view class="">{{info.share_count>0?info.share_count:'分享'}}</view>
					</view>
				</button>
				<view class="fx-center">
					<view class="fx-center" @click.stop="toLiked(info.liked)">
						<image src="/static/zan1.png" mode="heightFix" v-if="info.liked"></image>
						<image src="/static/zan.png" mode="heightFix" v-else></image>
						<view :style="info.liked ? 'color: #4078E5;':''">{{info.like_count>0?info.like_count:'点赞'}}
						</view>
					</view>
					<view class="fx-center news-left" @click.stop="clickComment">
						<image src="/static/news.png" mode="heightFix"></image>
						<view class="">{{info.comments_count>0?info.comments_count:'评论'}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view v-show="showInput">
			<c-comment-input ref="commentRef" :topicID="info.id" :showCount="false" @setBlur="closeComment"
				@done="commentSubmit"></c-comment-input>
		</view> -->
	</view>
</template>

<script>
	import zhReadMore from '../../uni_modules/zh-readMore/components/zh-readMore/zh-readMore.vue'
	export default {
		name: "talk-item",
		components: {
			zhReadMore
		},
		props: {
			info: {
				typeof: Object,
				default: {}
			},
			showInput: {
				typeof: Boolean,
				default: false
			}
		},
		data() {
			return {
				title: '',
				// showInput: false
			};
		},
		computed: {
			getimg() {
				let bImg = uni.getStorageSync('share_image') ? uni.getStorageSync('share_image') : ''
				return this.info.file_assets.length > 0 ? this.info.file_assets[0].url : bImg
			}
		},
		methods: {
			clickExpand(e) {
				console.log('eee', e)
			},
			clickAction(title) {
				this.title = title
				this.$refs.sheetRef.show()
			},
			toDetail() {
				if (this.$store.state.islogin) {
					uni.navigateTo({
						url: '/pages/index/talkDetail/talkDetail?id=' + this.info.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			toHome() {
				uni.navigateTo({
					url: '/pages/mine/myHome/myHome?id=' + this.info.user.id
				})
			},
			// 点赞
			toLiked(state) {
				if (this.$store.state.islogin) {
					this.$api.requst('/gwc/likes', {
						action: state ? 0 : 1,
						obj_type: 'Topic',
						obj_id: this.info.id
					}, 'POST').then((res) => {
						this.info.liked = !state
						if (this.info.liked) {
							this.info.like_count++
						} else {
							this.info.like_count--
						}
						this.$emit('refrashUser')
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			// 查看项目
			lookProject(id) {
				uni.navigateTo({
					url: '/pages/index/projectDetail/projectDetail?id=' + id
				})
			},
			// 点击评论
			clickComment() {
				if (this.$store.state.islogin) {
					let page = getCurrentPages()
					let route = page[page.length - 1].route
					if (route === 'pages/index/index' || route === 'pages/workbench/workbench' || route ===
						'pages/mine/mine') {
						uni.hideTabBar()
					}
					// this.showInput = true
					this.$emit('showEvent', this.info)
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			// 关闭输入框
			closeComment() {
				// this.showInput = false
				this.$emit('closeEvent')
				let page = getCurrentPages()
				let route = page[page.length - 1].route
				if (route === 'pages/index/index' || route === 'pages/workbench/workbench' || route ===
					'pages/mine/mine') {
					setTimeout(() => {
						uni.showTabBar()
					}, 10)
				}
			},
			// 评论成功
			commentSubmit() {
				this.info.comments_count++
				this.closeComment()
			}

		},

	}
</script>

<style scoped lang="scss">
	.talk-item {
		.talk-item-user {
			margin-bottom: 24rpx;

			.user-avtr {
				width: 80rpx;
				height: 80rpx;
				margin-right: 24rpx;
				border-radius: 50%;
			}

			.name {
				color: #161616;
				font-size: 30rpx;
				font-weight: bold;
			}

			.desc {
				color: #8A8F99;
				font-size: 22rpx;
				margin-top: 10rpx;
			}

			.dian-box {
				height: 60rpx;
				width: 60rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.dian-icon {
					width: 6rpx;
					height: 30rpx;
				}
			}


		}

		.talk-img-box {
			flex-wrap: wrap;

			.talk-img {
				border-radius: 16rpx;
				width: 202rpx;
				height: 202rpx;
				margin-right: 16rpx;
				margin-top: 24rpx;
				flex-shrink: 0;
			}

			.talk-img:nth-child(3n) {
				margin-right: 0;
			}
		}

		.project-box {
			border: 1rpx solid #E2E2E2;
			padding: 16rpx 16rpx 16rpx 10rpx;
			font-size: 26rpx;
			color: #333333;
			margin-top: 40rpx;

			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 24rpx;
				border-radius: 4rpx;
			}
		}

		.talk-tag {
			margin-top: 24rpx;
			margin-right: 24rpx;

			text {
				background: #F1F3F6;
				color: #5C5F66;
				font-size: 22rpx;
				font-weight: bold;
				padding: 6rpx 12rpx 8rpx 12rpx;
			}
		}

		.talk-opration {
			margin-top: 48rpx;
			padding-bottom: 26rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}

			.news-left {
				margin-left: 70rpx;
			}
		}
	}
</style>